<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" @click="tabClick" :activeStyle="activeStyle" lineColor="#675f91" :current="current">
				<view slot="right" style="padding-right: 10px;">
					<view class="flex">
						<u-button type="primary" size="small" text="入库" @click="add"></u-button>
					</view>
				</view>
			</u-tabs>
			<view class="flex bg-gray" v-if="current == 0">
				<template v-for="col in tableHd0">
					<view class="col-item font-24" :style="[col.style]">
						{{col.title}}
					</view>
				</template>
			</view>
			<view class="flex bg-gray" v-if="current == 1">
				<template v-for="col in tableHd1">
					<view class="col-item font-24" :style="[col.style]">
						{{col.title}}
					</view>
				</template>
			</view>
		</u-sticky>
		<view class="" v-if="current == 0">
			<nodata v-if="loadingStatus == 'end' && list0.length == 0"></nodata>
			<template v-for="d in list0">
				<view class="bgw">
					<view class="date-item bgw font-bold">
						{{d.date}}
					</view>
					<u-line></u-line>
					<template v-for="v in d.list">
						<view class="flex">
							<template v-for="col in tableHd0">
								<view class="col-item" :style="[col.style]">
									{{v[col.key]}}
								</view>
							</template>
						</view>
						<u-line dashed></u-line>
					</template>
				</view>
				<view class="blank20"></view>
			</template>
		</view>
		<view class="" v-if="current == 1">
			<nodata v-if="loadingStatus == 'end' && list1.length == 0"></nodata>
			<template v-for="v in list1">
				<view class="bgw" @click="toWarehousingEdit(v)">
					<view class="flex">
						<template v-for="col in tableHd1">
							<view class="col-item" :style="[col.style]" v-if="col.key == 'action'">
								<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
							</view>
							<view class="col-item" :style="[col.style]" v-else>
								{{v[col.key]}}
							</view>
						</template>
					</view>
				</view>
				<view class="blank20"></view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		stock_in_and_to_be_stock_in
	} from "@c/api.js";
	import nodata from '@/components/nodata.vue';
	// import TabsCurrent from "./components/TabsCurrent.vue";
	export default {
		components: {
			nodata
			// TabsCurrent
		},
		data() {
			return {
				current: 0,
				titleStyle: {
					color: "#ffffff",
				},
				bgColor: "#675f91",
				activeStyle: {
					color: "#675f91",
				},
				current: 0,
				activeStyle: {
					color: '#675f91'
				},
				tabs: [{
						name: "已入库",
					},
					{
						name: "待入库",
					},
				],
				list0: [],
				tableHd0Config:{
					material_id:{
						title: '食材',
						key: '_material_id',
						style: {
							flex: 1,
							'min-width':'180rpx'
						}
					},
					purchase_unit_qty:{
						title: '入库数量',
						key: 'purchase_unit_qty',
						style: {
							width: '140rpx',
							'text-align':'right'
						}
					},
					purchase_unit_id:{
						title: '单位',
						key: '_purchase_unit_id',
						style: {
							width: '120rpx',
						}
					},
					purchase_unit_price:{
						title: '单价',
						key: 'purchase_unit_price',
						style: {
							width: '120rpx'
						}
					},
					_price:{
						title: '金额',
						key: '_price',
						style: {
							width: '120upx'
						}
					},
					msupplier_id:{
						title: '供应商',
						key: '_msupplier_id',
						style: {
							flex: 1,
							'min-width':'200rpx'
						}
					}
				},
				tableHd0: [],
				list1: [],
				tableHd1: [{
						title: '供应商',
						key: '_msupplier_id',
						style: {
							flex: 1
						}
					},
					{
						title: '待入库',
						key: 'order_lines',
						style: {
							flex: 1
						}
					},
					{
						title: '',
						key: 'action',
						style: {
							width: '100rpx'
						}
					},
				],
				loadingStatus:''
			};
		},
		methods: {
			sort_list(list){
				list = list.sort((a,b)=>{
					let a_time = new Date(a.date).getTime();
					let b_time = new Date(b.date).getTime();
					return b_time - a_time;
					// return a_time - b_time;
				});
				return list;
			},
			getData() {
				uni.showLoading({
					title: "加载中",
					mask:true
				});
				this.loadingStatus = 'loading';

				stock_in_and_to_be_stock_in()
					.then((res) => {
						let fn_list = res.result['已入库明细'].fn_list || [];
						let tableHd0 = [];
						fn_list.forEach(v=>{
							if(this.tableHd0Config[v]){
								tableHd0.push(this.tableHd0Config[v]);
								if(v=='purchase_unit_price'){
									tableHd0.push(this.tableHd0Config._price);
								}
							}
						})
						this.tableHd0 = tableHd0;
						
						// 已入库明细
						let list0 = [];
						let stockList = res.result['已入库明细'].slist || [];
						let waitObj = {};
						stockList.forEach(v => {
							!waitObj[v.date] && (waitObj[v.date] = []);
							v._material_id = v.material_id[1];
							v._msupplier_id = v.msupplier_id[1];
							v._purchase_unit_id = v.purchase_unit_id[1] ;
							v._price = this.formatPrice(v.purchase_unit_qty * v.purchase_unit_price);
							waitObj[v.date].push(v);
						});
						for (let date in waitObj) {
							list0.push({
								date: date,
								list: waitObj[date]
							})
						}
						this.list0 = this.sort_list(list0);
						// 待入库
						let list1 = [];
						let waitList = res.result['待入库'] || [];
						waitList.forEach(v => {
							v._msupplier_id = v.msupplier_id[1];
							list1.push(v);
						});
						this.list1 = list1;
						this.loadingStatus = 'end';
					})
					.catch(()=>{
						this.loadingStatus = 'end';
					})
					.finally(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
			tabClick(e) {
				this.current = e.index;
			},
			add() {
				this.nav("/warehousingFood/warehousingFood");
			},
			toWarehousingEdit(v){
				this.nav(`/warehousingEdit/warehousingEdit?id=${v.msupplier_id[0]}`)
			}
		},
		onMounted() {},
		onLoad(d) {
			this.getData();
		},
		onShow() {
			uni.$off('refresh_warehousing');
			uni.$once('refresh_warehousing',()=>{
				this.getData();
				uni.$emit('refresh_stock');
			})
		},
		onUnload(){
			
		},
		onReady() {},
		onPullDownRefresh() {
			this.getData();
		},
	};
</script>

<style lang="scss" scoped>
	.col-item {
		padding: 20upx 20upx;
		// text-align: center;
	}

	.date-item {
		padding: 20upx 30upx;
	}
</style>